<page-header-wrapper title="费用单" [logo]="logo">
  <ng-template #logo>
    <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
      <i nz-icon nzType="left" nzTheme="outline"></i>
    </button>
  </ng-template>
</page-header-wrapper>

<nz-card class="search-box">
  <div nz-row>
    <div nz-col nzSpan="24">
      <se-container col="3" labelWidth="120" *ngIf="!textStatus">
        <se-title class="mb-md" style="font-size: 18px">基本信息（应收费用）</se-title>
        <se label="网络货运人" required>
          {{ costInfo?.ltdName }}
        </se>
        <se label="费用类型" required col="2">
          {{ costInfo?.feetypeLabel }}
        </se>
        <se label="费用备注">
          {{ costInfo?.arremarks }}
        </se>
        <se label="应收对象" required>
          {{ costInfo?.artoname }}
        </se>
        <se label="开票类型" required>
          {{ costInfo?.arvattypeLabel }}
        </se>
        <se label="应收金额" required>
          {{ costInfo?.armoeny | currency }}
        </se>
        <se label="开票金额" required>
          {{ costInfo?.armoeny | currency }}
        </se>
        <se label="收款金额" required>
          {{ costInfo?.armoeny | currency }}
        </se>
      </se-container>
      <se-container col="3" labelWidth="120" *ngIf="textStatus" class="mt-md">
        <se-title class="mb-md" style="font-size: 18px">基本信息（应付费用）</se-title>
        <se label="网络货运人" required>
          {{ costInfo?.ltdName }}
        </se>
        <se label="费用类型" required>
          {{ costInfo?.feetypeLabel }}
        </se>
        <se label="应付核销" required> {{ costInfo?.hrmoney | currency}}</se>
        <se label="费用备注">
          {{ costInfo?.hrremarks }}
        </se>
        <se label="应收对象" required>
          {{ costInfo?.hrtoname }}
        </se>
        <se label="收票类型" required>
          {{ costInfo?.hrvattypeLabel }}
        </se>
        <se label="应付金额" required>
          {{ costInfo?.hrmoney | currency}}
        </se>
        <se label="收票金额" required>
          {{ (costInfo?.hrvatmoney || 0) | currency }}
        </se>
        <se label="付款金额" required>
          {{ costInfo?.hrmoney | currency}}
        </se>
      </se-container>
    </div>
  </div>
</nz-card>

<nz-card class="content-box" nzBordered>
  <nz-tabset>
    <nz-tab nzTitle="费用明细">
      <st #st [scroll]="{ x: '2000px' }" [data]="costInfo?.ficoFeeLList" [columns]="columns.cost"
        [page]="{ show: false }" [loading]="false" [scroll]="{ x: '1200px', y: '370px' }">
        <ng-template st-row="no" let-item let-index="index" let-column="column">
          {{ index + 1 }}
        </ng-template>
        <ng-template st-row="artocode" let-item let-index="index">
          {{ costInfo?.artocode}}/{{ costInfo?.artonames}}
        </ng-template>
        <ng-template st-row="hrvatmoney" let-item let-index="index">
          <span *ngIf="!textStatus">{{ item.armoney | currency}}</span>
          <span *ngIf="textStatus">{{ item.hrmoney | currency}}</span>
        </ng-template>
        <ng-template st-row="armoney" let-item let-index="index">
          <!-- {{ item.armoney | currency}} -->
          <span *ngIf="!textStatus">{{ item.armoney | currency}}</span>
          <span *ngIf="textStatus">{{ item.hrmoney | currency}}</span>
        </ng-template>
        <ng-template st-row="arkpmoney" let-item let-index="index">
          {{ item.arkpmoney | currency}}
        </ng-template>
        <!-- <ng-template st-row="no" let-item let-index="index" let-column="column">
          {{ textStatus ? item.hrmoney : item.hrvatmoney }}
        </ng-template> -->
        <ng-template st-row="billTime" let-item let-index="index" let-column="column">
          {{costInfo.billTime}}
        </ng-template>
        <ng-template st-row="cnoName" let-item let-index="index" let-column="column">
          {{costInfo.cnoName}}
        </ng-template>
      </st>
    </nz-tab>
    <nz-tab nzTitle="开票信息">
      <st #st [scroll]="{ x: '2000px' }" [data]="costInfo?.ficoVatappDatailList" [columns]="columns.requested"
        [page]="{ show: false }" [loading]="false" [scroll]="{ x: '1200px', y: '370px' }">
        <ng-template st-row="armoney" let-item let-index="index">
          {{ item.armoney | currency}}
        </ng-template>
        <ng-template st-row="vatmoney" let-item let-index="index">
          {{ item.vatmoney | currency}}
        </ng-template>
        <ng-template st-row="no" let-item let-index="index" let-column="column">
          {{ index + 1 }}
        </ng-template>
      </st>
    </nz-tab>
    <nz-tab nzTitle="收款信息"  *ngIf="!textStatus">
      <st #st [scroll]="{ x: '2000px' }" [data]="costInfo?.ficoAhxLList" [columns]="columns.collection"
        [page]="{ show: false }" [loading]="false" [scroll]="{ x: '1200px', y: '370px' }">
        <ng-template st-row="ahxmoney" let-item let-index="index">
          {{ item.ahxmoney | currency}}
        </ng-template>
        <ng-template st-row="ahxmoney" let-item let-index="index">
          {{ item.ahxmoney | currency}}
        </ng-template>
        <ng-template st-row="no" let-item let-index="index" let-column="column">
          {{ index + 1 }}
        </ng-template>
        <ng-template st-row="status" let-item let-index="index" let-column="column"> 已核销 </ng-template>
      </st>
    </nz-tab>
    <nz-tab nzTitle="收票信息">
      <st #st [data]="data" [scroll]="{ x: '2000px' }" [columns]="columns.ticket" [page]="{ show: false }"
        [loading]="false" [scroll]="{ x: '1200px', y: '370px' }"></st>
    </nz-tab>
    <nz-tab nzTitle="付款信息" *ngIf="textStatus">
      <st #st [scroll]="{ x: '2000px' }" [data]="costInfo?.ficoPhxLList" [columns]="columns.payment"
        [page]="{ show: false }" [loading]="false" [scroll]="{ x: '1200px', y: '370px' }">
        <ng-template st-row="no" let-item let-index="index" let-column="column">
          {{ index + 1 }}
        </ng-template>
        <ng-template st-row="phxmoney" let-item let-index="index" let-column="column">
          {{ item.phxmoney | currency}}
        </ng-template>
      </st>
    </nz-tab>
  </nz-tabset>
</nz-card>